<template>
  <div class="container">
    <div class="myinfo">
      <el-descriptions direction="vertical" class="margin-top" title="药品信息" :column="1" :size="size" style="margin: 20px 20px 24px 22px;" border>
        <el-descriptions-item label="【药名】" :colon="true" style="width: 200px;" class="avatar-item">
          <div>
            <span style="margin-top: 90px;margin-left: 11px;font-size: 19px;color: red">{{userData.name}}</span>
          </div>
          <el-image
            style="width: 100px; height: 100px;margin-top: 23px"
            :src="userData.imageUrl"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="【药物分类】">{{userData.category}}</el-descriptions-item>
        <el-descriptions-item label="【ATC编码】">{{userData.atcCode}}</el-descriptions-item>
        <el-descriptions-item label="【规格/包装】">{{userData.specification}}</el-descriptions-item>
        <el-descriptions-item label="【成分】">{{userData.ingredient}}</el-descriptions-item>
        <el-descriptions-item label="【适应症】">{{userData.indication}}</el-descriptions-item>
        <el-descriptions-item label="【用法用量】">{{userData.usageDosage}}</el-descriptions-item>
        <el-descriptions-item label="【禁忌】">{{userData.taboo}}</el-descriptions-item>
        <el-descriptions-item label="【不良反应】">{{userData.adverseReaction}}</el-descriptions-item>
        <el-descriptions-item label="【注意事项】">{{userData.lookOut}}</el-descriptions-item>
        <el-descriptions-item label="【药物相互作用】">{{userData.drugInteraction}}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
// import request from '@/api/request'
import request from '@/api/request'
export default {
  data () {
    return {
      categoryInfo: '',
      size: 'large',
      isEditing: false,
      dialogVisible: false,
      dialogImageUrl: '',
      imageUrl: '',
      formData: {
        imageUrl: ''
      },
      userData: {
        imageUrl: ''
      }
    }
  },
  created () {
    this.$eventBus.$on('categoryNameinfo', this.handleCategoryNameEvent)
  },
  mounted () {
    // alert(this.categoryInfo)
    this.userinfo()
  },
  methods: {
    handleCategoryNameEvent (category) {
      this.categoryInfo = category
      // this.userinfo()
    },
    // const id = this.$route.query.id
    userinfo () {
      const token = localStorage.getItem('token') || localStorage.getItem('ordinaryUserToken')
      const id = this.$route.params.id
      const category = '调脂药物'
      // alert(category)
      const data = {
        id: id,
        category: category
      }
      // await request.get('/wMedicine/' + id, {
      request.post('/tcMedicine/my', data, {
        headers: {
          accept: 'application/json',
          Authorization: 'Bearer ' + token
        }
      }).then(resp => {
        if (resp.data.code === 200) {
          this.userData = resp.data.data
          this.formData = resp.data.data
        }
      }).catch(error => {
        this.handleAxiosError(error)
      })
    },
    handleAxiosError (error) {
      // 检查是否是Axios的网络错误
      if (error.isAxiosError && error.response) {
        // 处理您的网络错误，例如显示用户友好的提示
        this.$message.error('网络请求失败，请稍后重试')
      } else {
        // 处理其他类型的错误
        this.$message.error('网络请求失败，发生错误，请稍后重试')
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.myinfo {
  width: 1200px;
  margin: auto;
  background-color: #ffffff;
}

.avatar-item .el-descriptions-item__label {
  width: 200px;
  float: left;
}

.avatar-item .el-descriptions-item__content {
  margin-left: 220px;
}

.el-tag {
  margin-right: 8px;
}

.edit-button {
  padding-top: 20px;
}
</style>
